<!--
   Copyright 2024 The Google Research Authors.
  
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at
  
       http://www.apache.org/licenses/LICENSE-2.0
  
   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
-->

<!DOCTYPE html>
<html>
<head>
<title>Enter Password Click Option Login User Popup Task</title>
<!-- stylesheets -->
<link rel="stylesheet" type="text/css" href="../core/core.css">
<link rel="stylesheet" href="../core/jquery-ui/jquery-ui.min.css">
<style>
  .bold { font-weight: bold; }
  input { margin: 5px; width: 20px; }
  #popup {
    position: absolute;
    top: 62px; left: 8px;
    width: 120px; height: 120px;
    border: 2px solid #888;
    background-color: #EEE;
    padding: 5px 10px; font-size: 12px;
    display: flex; flex-direction: column; justify-content: space-around;
  }
  #popup p {
    margin: 0; text-align: center;
  }
  .hide { display: none; }
  /* 160 + 160 + 160 + 50 + 50 */
  #wrap,
  #sync-task-cover {
    height: 580px;
    width: 160px;
  }

  #click-canvas,
  #reward-display {
    left: 165px;
  }

  #query {
    background-color: #FF0;
    font-size: 10px;
    height: 94px;
    padding: 3px;
  }
  input[id="password1"] { width: 120px; }
  input[id="verify1"] { width: 120px; }
  input[id="password2"] { width: 120px; }
  input[id="username2"] { width: 120px; }
</style>

<!-- JS -->
<script src="../core/core.js"></script>
<script src="../core/d3.v3.min.js"></script>
<script src="../common/ui_utils.js"></script>
<script src="../core/jquery-ui/external/jquery/jquery.js"></script>
<script src="../core/jquery-ui/jquery-ui.min.js"></script>

<script>
core.EPISODE_MAX_TIME = 2000000;  // set episode interval to 2000 seconds

var createCheckboxes = function(div){
  var checkboxData = { toclick: {}, clickNames: [] };

  checkboxData.elems = core.randi(2, 7);
  for(var i=0;i<checkboxData.elems;i++) {
    var chname = ui_utils.generateString(2,8);
    var label = div.append('label')
    label.append('input').attr('type', 'checkbox').attr('id', 'ch'+i);
    label[0][0].innerHTML += chname;
    div.append('br');

    checkboxData.toclick[i] = false;
    if(core.randf(0,1) < 0.5) {
      checkboxData.toclick[i] = true;
      checkboxData.clickNames.push(chname);
    }
  }

  return checkboxData;
}

var genProblem = function() {
  var task_state = -1.0;
  // enter-password
  d3.select('#password1')[0][0].value ='';
  d3.select('#verify1')[0][0].value ='';

  var password1 = ui_utils.generateString(2,6);

  // reward awarder
  d3.select('#subbtn1').on('click', function(){
    var p = d3.select('#password1')[0][0].value;
    var v = d3.select('#verify1')[0][0].value;
    task_state = (p === password1 && v === password1) ? 1.0 : -1.0;
    console.log('enter-password', task_state);
  });

  // click-checkboxes
  var div = d3.select('#boxes');
  div.html('');

  var checkboxData = createCheckboxes(div);
  var qstr = checkboxData.clickNames.join(', ');
  if(qstr.length === 0) { qstr = 'nothing'; }

  // login-user-popup
  d3.select('#username2')[0][0].value ='';
  d3.select('#password2')[0][0].value ='';

  var user = core.sample(ui_utils.FIFTY_NAMES).toLowerCase();
  var password2 = ui_utils.generateString(2,6);

  d3.select('#query').html('Enter the password "<span class="bold">' + password1 + '</span>" into both text fields and press submit, select ' + qstr + ', and then enter the <span class="bold">username</span> "' + user + '" and the <span class="bold">password</span> "' + password2 + '" into the text fields and press login.');
  // d3.select('#query').html('Select ' + qstr + ', and then enter the <span class="bold">username</span> "' + user + '" and the <span class="bold">password</span> "' + password + '" into the text fields and press login., after entering the password "<span class="bold">' + password2 + '</span>" into both text fields and pressing submit');

  // click-checkboxes + login-user-popup
  d3.select('#subbtn2').on('click', function(){
    var u = d3.select('#username2')[0][0].value;
    var p = d3.select('#password2')[0][0].value;
    var login_r = (u === user && p === password2) ? 1.0 : -1.0;
    var r = 0;
    for(var i=0;i<checkboxData.elems;i++) {
      var is_checked = d3.select('#ch'+i)[0][0].checked;
      r += is_checked === checkboxData.toclick[i] ? 1.0 : -1.0;
    }
    checkbox_r = r == checkboxData.elems ? 1.0 : -1.0
    console.log('click-checkboxes', checkbox_r);
    console.log('login-user-popup', login_r);
    if (checkbox_r == 1.0 && task_state == 1.0) {
      core.endEpisode(login_r, login_r > 0);
    } else {
      core.endEpisode(-1.0);
    }
  });

  // Clean the previous states
  d3.selectAll('#username2, #password2, #subbtn2').attr('disabled', null);
  d3.select('#popup').remove();
  var popupShown = false;

  // Random Popup 
  function showPopup () {
    if (popupShown) return;
    d3.selectAll('#username2, #password2, #subbtn2').attr('disabled', 'disabled');
    var message
    if (Math.random() < 0.85) {
      message = 'Your session is ' + core.sample([
          'about to expire.',
          'about to time out.',
          'expiring soon.',
          'soon to expire.',
          'timing out soon.',
          'going to expire soon.',
          'going to time out soon.',
          ]);
    } else {
      message = core.sample([
        'You are running out of time, aren\'t you?',
        'You have 10 new messages.',
        'Your mother is calling you for dinner.',
        'Please do not panic.',
        'This is an annoying popup message.',
        'It looks like you are trying to log in.',
        'You look good today.',
        'Sorry for this annoying message.',
        ]);
    }
    d3.select('#area').append('div').attr('id', 'popup').html(`
        <p>` + message + `</p>
        <p>Exit to home page?</p>
        <p><button id=popup-ok>OK</button> <button id=popup-cancel>Cancel</button>`);
    d3.select('#popup-ok').on('click', function () {
      core.endEpisode(-1);
    });
    d3.select('#popup-cancel').on('click', function () {
      d3.selectAll('#username2, #password2, #subbtn2').attr('disabled', null);
      d3.select('#popup').remove();
    });
    popupShown = true;
  }
  var popupMode = core.sample([
      'username2', 'password2', null, null,
      ]);
  d3.select('#username2').on('focus', popupMode != 'username2' ? null : showPopup);
  d3.select('#password2').on('focus', popupMode != 'password2' ? null : showPopup);
}

window.onload = function() {
  core.startEpisode();
}
</script>
</head>
<!-- Base HTML -->
<body>
<div id="wrap">
  <div id="query"></div>
  <div id="area">
    <div id="form1">
      <p><label>Password 1</label><input type="password" id="password1"></p>
      <p><label>Verify password 1</label><input type="password" id="verify1"></p>
      <button id="subbtn1" class="secondary-action">Submit</button>
    </div>
    <div id="boxes"></div>
    <div id="form2">
      <p><label class="bold">Username 2</label><input type="text" id="username2"></p>
      <p><label class="bold">Password 2</label><input type="password" id="password2"></p>
    </div>
    <button id="subbtn2" class="secondary-action">Login</button>
  </div>
</div>
</body>
</html>
